<template>
  <el-container>
    <!-- #region  头部-->
    <el-header>
      <div
        @click="goHome"
        class="home-logo"
      >
        <div class="logoImg">
          <!-- <img :src="webConfig.loginlogourl" alt="" /> -->
          <img
            alt
            src="../assets/logo.png"
          />
        </div>
      </div>
      <!-- <div class="site-name" v-show="!isCollapseMenu">
        <h1 class="">
          {{ webConfig.SystemName }}
        </h1>
      </div>-->
      <div class="header-main">
        <div
          @click="toggleCollapse"
          class="toggle-button ml-1"
        >
          <i :class="'iconfont ' + collapseIcon"></i>
        </div>
        <div class="row jcfe">
          <span class="mr1 hidden-xs-only">
            {{ new Date().interval() }}
            {{ user.branchname ? user.branchname + " ~ " : "" }}
            {{ user.roleRight.role_name }}
          </span>
          <!-- new Date().sayHello(user.realName || user.username || "") -->
          <el-badge
            class="item"
            is-dot
          >
            <el-dropdown
              @command="handleCommand"
              trigger="click"
            >
              <span class="el-dropdown-link">
                <!-- <el-avatar
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                >
                </el-avatar>-->
                <el-avatar
                  src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
                ></el-avatar>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="account">
                  <i class="el-icon-user"></i>
                  {{ $language.local("个人中心") }}
                </el-dropdown-item>
                <!-- <el-dropdown-item command="account">
                  <i class="el-icon-shopping-cart-2"> </i>
                  {{ $language.local("我的账户") }}
                </el-dropdown-item>-->
                <el-dropdown-item command="notification">
                  <i class="el-icon-chat-line-round"></i>
                  {{ $language.local("通知中心") }}
                </el-dropdown-item>

                <el-dropdown-item command="localLang">
                  <i class="el-icon-refresh"></i>
                  {{ language }}
                </el-dropdown-item>

                <el-dropdown-item
                  command="logout"
                  divided
                >
                  <i class="el-icon-switch-button"></i>
                  {{ $language.local("退出登录") }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-badge>
        </div>
      </div>
    </el-header>
    <!-- #endregion -->
    <el-container>
      <el-aside :width="isCollapseMenu ? '64px' : '180px'">
        <!--           background-color="#333744"        background-color="#f5f6fc"
        text-color="#fff"-->

        <div class="inner-container">
          <el-menu
            :collapse="isCollapseMenu"
            :collapse-transition="false"
            :default-active="activePath"
            :popper-append-to-body="false"
            active-text-color="#06f"
            class="el-menu-vertical-demo"
            router
            unique-opened
          >
            <el-submenu
              :index="menu.sort_id"
              :key="menu.sort_id"
              v-for="menu in menuList"
            >
              <template slot="title">
                <i :class="`iconfont ${menu.icon_url}`"></i>
                <span class="menu-title">
                  {{
                  $language.local(menu.title)
                  }}
                </span>
              </template>

              <el-menu-item
                :index="'/' + submenu.name"
                :key="submenu.id"
                @click="saveActiveNav(submenu)"
                v-for="submenu in menu.subMenus"
              >
                <template slot="title">
                  <!-- <i class="el-icon-menu"></i> -->
                  <span class="submenu-title">
                    {{
                    $language.local(submenu.title)
                    }}
                  </span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-main>
        <!-- 页头 -->
        <!-- <el-page-header @back="goBack" content="详情页面"> </el-page-header> -->

        <el-tabs
          @tab-click="handleClick"
          @tab-remove="removeTab"
          class="xy-tabs"
          closable
          type="border-card"
          v-model="activeMenuName"
        >
          <el-tab-pane
            :key="item"
            :label="$language.local(item)"
            :name="item"
            v-for="item in activeMenuList"
          ></el-tab-pane>
          <div class="inner-container">
            <!-- 路由占位符 -->
            <transition
              mode="out-in"
              name="slide-fade"
            >
              <router-view
                class="child-view"
                v-if="isRouterAlive"
              ></router-view>
              <!-- <keep-alive>
              </keep-alive>-->
            </transition>
          </div>
        </el-tabs>

        <!-- 面包屑 -->
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="path in pathList" :key="path">{{
            path
          }}</el-breadcrumb-item>
        </el-breadcrumb>-->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// import { notEmpty, notNull } from "../pugins/assert.js";
// import menuList from "./menudata";
export default {
  provide() {
    return {
      reload: this.reload,
      toFixed2: this.toFixed2,
    };
  },
  data() {
    return {
      isRouterAlive: true,
      user: this.$store.getters.user,
      menuList: [],
      isCollapseMenu: false,
      asideWidth: "180px",
      collapseIcon: "icon-zhedie",
      activePath: "",
      activeMenuName: "",
      activeMenuList: [],
      language: "English",
      webConfig: this.$store.getters.data.webConfig,
      rights: null,
    };
  },

  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(to);
    this.addTab({ name: to.name });
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    next();
  },

  created() {
    this.activePath = this.$route.matched[1].path;
    console.log(this.$route.name);
    this.addTab({ name: this.$route.name });

    if (window.screen.width <= 768) {
      this.isCollapseMenu = true;
    }
    this.getMenus();

    this.language =
      window.localStorage.getItem("language") === "en" ? "简体中文" : "English";
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    toFixed2(num) {
      if (!num) {
        return "0.00";
      }

      if (typeof num == "string") {
        num = Number(num);
      }
      return num.toFixed(2);
    },
    handleCommand(command) {
      switch (command) {
        case "logout":
          this.onLogout();
          break;
        case "account":
          // this.activePath = "/account";
          this.$router.push("/welcome");
          break;
        case "localLang": {
          if (window.localStorage.getItem("language") === "en") {
            window.localStorage.setItem("language", "zh-CN");
            this.language = "English";
          } else {
            window.localStorage.setItem("language", "en");
            this.language = "简体中文";
          }
          location.reload();
          break;
        }
        case "notification": {
          this.$router.push("/sys_notice");

          break;
        }
        default:
          break;
      }
    },
    onLogout() {
      window.sessionStorage.clear();

      this.$router.replace("/login");
    },

    /**
     * 获取菜单
     */
    async getMenus() {
      let query = {
        hostname: window.location.hostname,
      };
      let response = await this.$http.get("/api/Login/GetNavigation", query);
      this.menuList = response.data.Data;
      this.$store.commit("setData", { menus: this.menuList });

      // this.rights = this.getRights(this.menuList);
      // console.log(this.rights);
      // this.$store.commit("rights", this.rights);
    },
    /**
     * 获取权限
     */
    getRights(arr) {
      const obj = {};
      for (let i = 0; i < arr.length; i++) {
        let { subMenus } = arr[i];
        for (let j = 0; j < subMenus.length; j++) {
          subMenus[j];
          Object.assign(obj, { [subMenus[j].name]: subMenus[j].action_type });
        }
      }
      return obj;
    },
    /**
     * 点击按钮 切换折叠
     */
    toggleCollapse() {
      this.isCollapseMenu = !this.isCollapseMenu;
      this.collapseIcon = this.isCollapseMenu ? "icon-zhedie2" : "icon-zhedie";
    },
    /**
     * 返回主页
     */
    goHome() {
      if (this.$route.path == "/welcome") {
        return;
      }
      console.log(this.activePath);
      this.activePath = "";

      window.sessionStorage.removeItem("activePath");
      window.sessionStorage.removeItem("activeMenuName");

      this.activeMenuList = [];
      this.$router.push("/welcome");
    },
    saveActiveNav(...e) {
      console.log(e);
    },
    addTab({ name }) {
      console.log(name);
      // this.activePath = path;
      this.activeMenuName = name;
      let a = this.activeMenuList.find((v) => v === name);
      if (a) {
        return;
      }
      if (this.activeMenuList.length > 6) {
        this.activeMenuList.shift();
      }
      this.activeMenuList.push(name);
      this.activeMenuName = name;
    },

    handleClick(tab) {
      let name = this.activeMenuList[tab.index];
      this.$router.push({ name });
    },
    removeTab(targetName) {
      let tabs = this.activeMenuList;
      let activeName = this.activeMenuName;

      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab;
            } else {
              activeName = "欢迎";
            }
          }
        });
      }
      this.activeMenuName = activeName;

      if (tabs.length > 1) {
        this.activeMenuList = tabs.filter((tab) => tab !== targetName);
      } else {
        this.activeMenuList = [this.activeMenuName];
      }

      this.$router.push({ name: this.activeMenuName });
    },

    setBreadcrumb() {
      // pathList;
    },
    async getRoleTyle() {
      const response = await this.$http.get("/api/role/GetRoleType");
      console.log(response);
    },
  },
};
</script>

<style lang="less" scoped>
@media screen and (max-width: 768px) {
}
.el-container {
  height: 100%;

  .el-header {
    height: 10vh;
    width: 100%;
    padding: 0;
    display: flex;

    .home-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #0e469c;
      width: 180px;
      min-width: 180px;
      max-width: 180px;
      .logoImg {
        //display: flex;
        //width: 64px;
        height: auto;
        padding: 1rem;
        border-radius: 50%;
        // justify-content: center;
        // align-items: center;
        // border: 4px solid whitesmoke;
        // box-shadow: 0 0 10px #ddd;
        img {
          // border-radius: 50%;
          width: 100%;
          // height: 40px;
          // background-color: white;
          // border: 4px solid whitesmoke;
          //  box-shadow: 0 0 10px #ddd;
        }
      }
    }
    .site-name {
      padding-left: 1rem;
      width: 116px;
      background-color: #0e469c;
      min-width: 116px;
      max-width: 116px;
      color: white;
      // padding-left: 1rem;
      white-space: nowrap;
    }
    .header-main {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
      background-color: #0e469c;
      background-image: linear-gradient(to right, #0e469c, #409eff);
      .toggle-button {
        // background-color: #fff;
        cursor: pointer;
        width: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          //color: #4a9bfa;
          color: white;
          font-size: 1.5rem;
          &:active {
            color: white;
            background: #4a9bfa;
            padding: 1ex;
            border-radius: 4px;
            opacity: 0.6; //这里重要，就是通过这个透明度来设置
          }
          &:hover {
            background: #4a9bfa;
            opacity: 0.6;
            padding: 1ex;
            border-radius: 4px;
          }
        }
        &.is-active {
          justify-content: flex-end;
        }
        // letter-spacing: 0.2em; // 字间距
      }
      .row {
        align-items: center;
      }
      .item {
        margin-top: 10px;
        margin-right: 10px;
      }
      .el-dropdown-link {
        cursor: pointer;
        color: #409eff;
        display: flex;
        align-items: center;
      }
      .el-icon-arrow-down {
        font-size: 12px;
        color: white;
      }
    }
  }
  .el-container {
    height: 90vh;
  }
  .el-aside {
    background-color: white;
    //color: #909399;
    position: relative;
    height: 90vh;
    overflow: hidden;

    .inner-container {
      width: 100%;
      position: absolute;
      left: 0;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .inner-container::-webkit-scrollbar {
      display: none;
    }
    .el-menu {
      // background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);

      border-right: none;
      height: 86vh;
      .el-submenu {
        .menu-title {
          font-size: 1rem;
          color: rgb(83, 93, 113);
          font-weight: 600;
        }
        .submenu-title {
          font-size: 12px;
          padding-left: 1.6rem;
        }
      }
    }
  }
  .el-main {
    background-color: #eaedf1;
    padding: 1rem;
    .el-tabs {
      height: 100%;
      // position: relative;
      // overflow: hidden;
    }
    .el-breadcrumb {
      margin-bottom: 15px;
      font-size: 12px;
    }
  }
}
// .child-view {
//   // position: absolute;
//   // top: 0;
//   // left: 0;
//   // width: 100%;
//   // height: 100%;
//   // box-sizing: border-box;
//   // transition-property: transform, opacity;
//   // transition-duration: 0.6s;
//   // transition-timing-function: ease-out;
//   // background-color: #ffffff;
//   // display: flex;
//   // flex-direction: column;
// }
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(20px);
  opacity: 0;
}
</style>
